<template>
    <view class="listBox">
        <!-- 列表 -->
        <view>
            <!-- 详情页details  1.待提车，2.使用中，3.已超时，4.已完成 -->
            <!-- 售后详情details1 -->
            <view class="list" @click="details(1)">
                <view class="flex justify_content_between f_28 mb_24">
                    <view class="f_28">
                        <text style="font-size: 32rpx; font-weight: bold; margin-right: 10rpx">#20</text>
                        <text style="margin-right: 10rpx">20:30</text>
                        <text class="cl_999CA3">前送达</text>
                    </view>
                    <view class="cl_3377FF fw_bold">待接单</view>
                </view>
                <view class="flex" v-for="i in 2">
                    <view>
                        <image class="shopImg" src="https://apk.xubvzpa.cn/d/file/bzlb/2019-04-16/e8295b9142bcac4c6749cd53303dded2.jpg" mode="widthFix"></image>
                    </view>
                    <view>
                        <view class="fw_bold f_32 listTitle">小牛电动 B0都市版新国标都市版新国标都市版新国标都市版新国标都市版新国标</view>
                        <view class="flex justify_content_between">
                            <view class="cl_999CA3 mr_24 f_28">2021新款;220V</view>
                            <view class="cl_999CA3 mr_24 f_28">x1</view>
                        </view>
                        <view class="flex justify_content_end mt_40 f_28">￥100</view>
                    </view>
                </view>
                <view class="flex justify_content_end f_28 mt_16">
                    <view class="flex">
                        <view class="cl_666B75">共200件 合计</view>
                        <view class="flex justify_content_end cl_FF6401 f_32 fw_bold">￥20000</view>
                    </view>
                </view>
                <!-- 买家地址 -->
                <view class="userInfo f_28">
                    <view class="info">李先生 181***1210</view>
                    <view class="info">贵州省贵阳市南明区花果园购物中心1号</view>
                </view>
                <!-- 买家留言 -->
                <!-- <view class="flex userInfo f_28">
				<view class="info cl_3377FF">买家留言：</view>
				<view class="info">请快些发货，谢谢了！</view>
			</view> -->
                <!-- 售后，申请原因 -->
                <view class="flex userInfo f_28">
                    <view class="info cl_FF6401">申请原因：</view>
                    <view class="info">七天无理由退换货</view>
                </view>
                <view class="flex justify_content_end f_28 mt_24">
                    接单员距离您
                    <text class="cl_3377FF">2.5km</text>
                    | 预计
                    <text class="cl_3377FF">5分钟</text>
                    到达
                </view>
                <view class="flex justify_content_end mt_16">
                    <view class="flex btn">
                        <view>联系买家</view>
                    </view>
                    <view class="flex btn back_3377FF cl_fff" @click.stop="sendShow = true">
                        <view>已备货</view>
                    </view>
                    <!-- <view class="flex btn">
					<view>联系师傅</view>
				</view> -->
                    <!-- <view class="flex btn">
					<view>删除订单</view>
				</view>
				<view class="flex btn back_3377FF cl_fff" @click.stop="evaluea">
					<view>查看评价</view>
				</view> -->
                    <!-- <view class="flex btn">
					<view>拒绝退款</view>
				</view>
				<view class="flex btn back_3377FF cl_fff">
					<view>确认退款</view>
				</view> -->
                </view>
            </view>
        </view>
    </view>
</template>
<script>
export default {
    name: 'order-item-battery',
    props: {
        item: {
            type: Object,
            default: () => {}
        }
    },
    data() {
        return {
            sendShow: false,
            type: 0, //0待发货，1待收货，2已完成，3售后中
            tipIndex: 1,
            tabIndex: 1,
            tabactive: 0,
            value1: 0
        };
    },
    methods: {
        // 详情
        details(type) {
            uni.navigateTo({
                url: '/pages/business/BatteryDetails?type=' + type
            });
        },
        // 售后详情
        details1() {
            uni.navigateTo({
                url: '/pages/business/AfterSales'
            });
        },
        // 待取货,配送中
        details2() {
            uni.navigateTo({
                url: '/pages/business/BatteryDelivery'
            });
        },
        // 查看评价
        evaluea() {
            uni.navigateTo({
                url: '/pages/business/OrderEvaluation'
            });
        },
        add() {
            uni.navigateTo({
                url: '/pages/business/addProduct'
            });
        },
        add_zc() {
            uni.navigateTo({
                url: '/pages/business/CarRental'
            });
        }
    }
};
</script>

<style scoped lang="scss">
.nameTitle {
    text-align: center;
}
.active {
    color: #3377ff !important;
}
.bottonTab {
    height: 100rpx;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: white;
    padding-bottom: 20rpx;
    padding-top: 20rpx;
}
.tabitem {
    width: 33.3%;
    margin: 0 auto;
    display: inline-block;
    text-align: center;
    font-size: 28rpx;
    color: #ccced1;
}
.tabIcon {
    width: 40rpx;
    height: 40rpx;
    display: block;
    margin: 0 auto;
}
.name {
    width: 574rpx;
    height: 92rpx;
    line-height: 92rpx;
    padding: 0 24rpx;
    margin-top: 10px;
}

.nameBtn {
    width: 298rpx;
    height: 100rpx;
    line-height: 100rpx;
    text-align: center;
    display: inline-block;
    margin-top: 64rpx;
}
.userInfo {
    background: #f7f7f7;
    border-radius: 16rpx;
    font-size: 28rpx;
    padding: 8rpx 24rpx;
    margin-top: 26rpx;
    .info {
        padding: 8rpx 0;
    }
}
.listTitle {
    width: 400rpx;
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.list {
    background: white;
    border-radius: 24rpx;
    margin-top: 24rpx;
    padding: 24rpx;
    display: block;
    overflow: hidden;
}
.shopImg {
    width: 200rpx;
    height: 200rpx;
    border-radius: 16rpx;
    margin-right: 24rpx;
}
.tipbox {
    background: #f7f7f7;
    border-radius: 8rpx;
    color: #666b75;
    font-size: 28rpx;
    padding: 8rpx;
}
.tip {
    padding: 16rpx;
    border-radius: 8rpx;
}
.tipActive {
    background: white;
    color: #00091a;
    padding: 16rpx;
    border-radius: 8rpx;
}
.tab {
    color: #999ca3;
    font-size: 28rpx;
    margin: 19rpx;
}
.tabActive {
    color: #3377ff;
    font-size: 32rpx;
    margin: 19rpx;
    font-weight: bold;
}
.btn {
    height: 68rpx;
    line-height: 68rpx;
    padding: 0 30rpx;
    text-align: center;
    border: 2rpx solid #ccced1;
    border-radius: 16rpx;
    margin: 0 12rpx;
    font-size: 28rpx;
}
</style>
